<template>
  <n-grid x-gap="12" :cols="4">
    <n-gi>
      <div>
        <n-button id="browse_button"> 选择文件 </n-button>
      </div>
    </n-gi>
    <n-gi>
      <n-button @click="uploadSingleFile" attr-type="button"> 上传 </n-button>
    </n-gi>
  </n-grid>
</template>

<script>
import plupload from "plupload";
export default {
  name: "SingleFileUpload",
  components: {},
  data() {
    return {
      uploader: {},
    };
  },
  props: {
    uploadPath: {
      type: String,
      required: true,
    },
  },
  created() {},
  methods: {
    uploadSingleFile() {
      this.$data.uploader.start();
    },
  },
  mounted() {
    const config = {
      browse_button: "browse_button",
      url: this.$props.uploadPath,
      multi_selection: false,
    };
    const uploader = new plupload.Uploader(config);
    uploader.init();
    this.$data.uploader = uploader;
  },
};
</script>

<style>
</style>